import * as React from "react";
import {
  Modal,
  Form,
  InputNumber,
  Input,
  Row,
  Col,
  Table,
  message,
} from "antd";
import { updateUnitSetData, getUnitSetDataList } from "../../../ServeApi";
import "./index.less";
import { AjaxData } from "../../../../../../data/interface/publicInterface";

export interface ModalUpdataProps {
  visible: boolean;
  device: any;
  onCancel: (bn: any) => any;
  onOk: (bn: any) => any;
}

export interface ModalUpdataState {
  isModalVisible: boolean;
  dataSouce: any[];
}

const formItemLayout = {
  labelCol: {
    xs: { span: 8 },
  },
  wrapperCol: {
    xs: { span: 16 },
  },
};
class ModalUpdata extends React.Component<ModalUpdataProps, ModalUpdataState> {
  state = { isModalVisible: false, dataSouce: [] };

  fields = {
    users: [
      {
        largeCategory: "1",
        subCategory: "T",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "1",
        subCategory: "A",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "1",
        subCategory: "B",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "1",
        subCategory: "C",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },

      {
        largeCategory: "2",
        subCategory: "T",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "2",
        subCategory: "A",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "2",
        subCategory: "B",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "2",
        subCategory: "C",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },

      {
        largeCategory: "3",
        subCategory: "T",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "3",
        subCategory: "A",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "3",
        subCategory: "B",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "3",
        subCategory: "C",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },

      {
        largeCategory: "4",
        subCategory: "T",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "4",
        subCategory: "A",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "4",
        subCategory: "B",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "4",
        subCategory: "C",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },

      {
        largeCategory: "5",
        subCategory: "T",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "5",
        subCategory: "A",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "5",
        subCategory: "B",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
      {
        largeCategory: "5",
        subCategory: "C",
        upLimit: null,
        upUpLimit: null,
        unLimit: null,
        unUnLimit: null,
        remark: "",
      },
    ],
  };
  columns = [
    {
      title: "名称",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "编号",
      dataIndex: "no",
      key: "no",
    },
    {
      title: "地址",
      dataIndex: "devAddr",
      key: "devAddr",
    },
    {
      title: "负荷类型",
      dataIndex: "typeName",
      key: "typeName",
    },
  ];
  formRef: any = null;
  render() {
    let { isModalVisible, dataSouce } = this.state;

    return (
      <>
        <Modal
          title="编辑"
          visible={isModalVisible}
          onOk={() => {
            this.handleOk();
          }}
          onCancel={() => {
            this.handleCancel();
          }}
          className="ModalUpdata"
        >
          <div>
            <Table
              columns={this.columns}
              dataSource={dataSouce}
              pagination={false}
            />
          </div>
          <div className="lineBox navSider">
            <Form
              {...formItemLayout}
              ref={(el) => (this.formRef = el)}
              //   initialValues={this.fields}
            >
              <Form.List name="users">
                {(fields) => (
                  <>
                    {fields.map((field) => {
                      let num = field.key % 4;
                      let str = "";
                      switch (num) {
                        case 0:
                          str = "总";
                          break;
                        case 1:
                          str = "A相";
                          break;
                        case 2:
                          str = "B相";
                          break;
                        case 3:
                          str = "C相";
                          break;
                        default:
                          break;
                      }

                      return (
                        <>
                          <Form.Item
                            name={[field.name, "largeCategory"]}
                            fieldKey={[field.fieldKey, "largeCategory"]}
                            style={{ display: "none" }}
                          >
                            <Input />
                          </Form.Item>
                          <Form.Item
                            name={[field.name, "subCategory"]}
                            fieldKey={[field.fieldKey, "subCategory"]}
                            style={{ display: "none" }}
                          >
                            <Input />
                          </Form.Item>

                          <div>
                            {this.isInteger(field.fieldKey / 4) ? (
                              <h2 style={{ color: "#1890FF" }}>
                                {this.getLarge(field.fieldKey / 4)}{" "}
                              </h2>
                            ) : null}

                            {str}
                          </div>
                          <Row>
                            <Col span={6}>
                              <Form.Item
                                name={[field.name, "upLimit"]}
                                fieldKey={[field.fieldKey, "upLimit"]}
                                label="上限"
                              >
                                <InputNumber />
                              </Form.Item>
                            </Col>
                            <Col span={6}>
                              <Form.Item
                                name={[field.name, "upUpLimit"]}
                                fieldKey={[field.fieldKey, "upUpLimit"]}
                                label="上上限"
                              >
                                <InputNumber />
                              </Form.Item>
                            </Col>
                            <Col span={6}>
                              <Form.Item
                                name={[field.name, "unLimit"]}
                                fieldKey={[field.fieldKey, "unLimit"]}
                                label="下限"
                              >
                                <InputNumber />
                              </Form.Item>
                            </Col>
                            <Col span={6}>
                              <Form.Item
                                name={[field.name, "unUnLimit"]}
                                fieldKey={[field.fieldKey, "unUnLimit"]}
                                label="下下限"
                              >
                                <InputNumber />
                              </Form.Item>
                            </Col>
                            <Col span={6}>
                              <Form.Item
                                name={[field.name, "remark"]}
                                fieldKey={[field.fieldKey, "remark"]}
                                label="备注"
                              >
                                <Input />
                              </Form.Item>
                            </Col>
                          </Row>
                        </>
                      );
                    })}
                  </>
                )}
              </Form.List>
            </Form>
          </div>
        </Modal>
      </>
    );
  }
  shouldComponentUpdate(
    newProps: ModalUpdataProps,
    NewState: ModalUpdataState
  ) {
    if (newProps.visible !== this.props.visible) {
      this.clearFromValue();
      this.setState({
        isModalVisible: newProps.visible,
        dataSouce: [newProps.device],
      });
      let pream = {
        deviceId: newProps.device.deviceId,
      };
      this.getUnitSetDataList(pream);
    }
    return true;
  }
  clearFromValue() {
    this.fields = {
      users: [
        {
          largeCategory: "1",
          subCategory: "T",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "1",
          subCategory: "A",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "1",
          subCategory: "B",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "1",
          subCategory: "C",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },

        {
          largeCategory: "2",
          subCategory: "T",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "2",
          subCategory: "A",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "2",
          subCategory: "B",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "2",
          subCategory: "C",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },

        {
          largeCategory: "3",
          subCategory: "T",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "3",
          subCategory: "A",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "3",
          subCategory: "B",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "3",
          subCategory: "C",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },

        {
          largeCategory: "4",
          subCategory: "T",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "4",
          subCategory: "A",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "4",
          subCategory: "B",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "4",
          subCategory: "C",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },

        {
          largeCategory: "5",
          subCategory: "T",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "5",
          subCategory: "A",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "5",
          subCategory: "B",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
        {
          largeCategory: "5",
          subCategory: "C",
          upLimit: null,
          upUpLimit: null,
          unLimit: null,
          unUnLimit: null,
          remark: "",
        },
      ],
    };
    this.setFromValue();
  }
  setFromValue() {
    setTimeout(() => {
      const container: any = (this.formRef as any) as HTMLDivElement;
      container.setFieldsValue({ ...this.fields });
    }, 200);
  }
  getLarge(number) {
    let arr: string[] = ["功率因数", "有功功率", "无功功率", "电压", "电流"];
    return arr[number];
  }
  isInteger(obj) {
    return obj % 1 === 0;
  }
  scrollToAnchor = (anchorName: string) => {
    if (anchorName) {
      // 找到锚点
      let anchorElement = document.getElementById(anchorName);
      // 如果对应id的锚点存在，就跳转到锚点
      if (anchorElement) {
        anchorElement.scrollIntoView({ block: "start", behavior: "smooth" });
      }
    }
  };
  //确认
  handleOk() {
    const container: any = (this.formRef as any) as HTMLDivElement;
    container
      .validateFields()
      .then((res) => {
        //输出修改后的参数
        // console.log(res);
        this.getUpPream(res);
      })
      .catch((err) => {
        console.log(err);
      });
  }
  //取消
  handleCancel() {
    this.setState({ dataSouce: [] });
    this.props.onCancel(false);
  }
  onFinish(values: any) {
    console.log(values);
  }
  //更新参数确认
  getUpPream(res: any) {
    let arr = res.users;
    let pream: any[] = [];
    arr.map((item: any) => {
      if (item.unLimit || item.unUnLimit || item.upLimit || item.upUpLimit) {
        item.deviceId = this.props.device.deviceId;
        pream.push(item);
      }
      return item;
    });
    this.updateUnitSetData(pream);
  }
  //更改表单value
  changefields(arr?: any[]) {
    if (arr) {
      for (let i = 0; i < arr.length; i++) {
        this.fields.users = this.fields.users.map((item: any) => {
          if (
            arr[i].largeCategory === item.largeCategory &&
            arr[i].subCategory === item.subCategory
          ) {
            let ss = {
              largeCategory: arr[i].largeCategory,
              subCategory: arr[i].subCategory,
              upLimit: arr[i].upLimit,
              upUpLimit: arr[i].upUpLimit,
              unLimit: arr[i].unLimit,
              unUnLimit: arr[i].unUnLimit,
              remark: arr[i].remark,
            };
            return ss;
          } else {
            return item;
          }
        });
        this.forceUpdate();
        this.setFromValue();
      }
    } else {
      this.setFromValue();
    }
  }
  /**请求数据 */
  //查看阈值设置
  async getUnitSetDataList(pream: any) {
    let res: any = await getUnitSetDataList(JSON.stringify(pream)).catch(
      (err) => {
        message.error({ err });
      }
    );
    let json: AjaxData = res;
    if (json.success) {
      if (json.data.length > 0) {
        this.changefields(json.data);
      } else {
        this.changefields();
      }
    }
  }
  //更新阈值设置
  async updateUnitSetData(params: any[]) {
    let res: any = await updateUnitSetData(JSON.stringify(params));
    let json: AjaxData = res;
    if (json.success) {
      this.setState({ dataSouce: [] });
      this.props.onOk(false);
    } else {
      Modal.error({
        title: json.message,
      });
    }
  }
}

export default ModalUpdata;
